<template>
  <div  class="table-search-page">
    <a-card :bodyStyle="tstyle" :bordered="false">
      <div class="table-page-search-wrapper" >
        <a-row :gutter="12" >
          <a-col :md="6" :sm="24">
            <a-form layout="inline" :form="form" :selfUpdate="true">
              <a-form-item label="客户卡号" >
                <a-input @change="clearSpace" @pressEnter="clickSearch" :maxLength="20" v-decorator="['cardNo']" allow-clear placeholder="请输入客户卡号"/>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form layout="inline" :form="form">
              <a-form-item label="客户姓名">
                <a-input  @change="clearSpace" @pressEnter="clickSearch" :maxLength="20" v-decorator="['name']" allow-clear placeholder="请输入客户姓名"/>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form layout="inline" :form="form">
              <a-form-item label="联系号码">
                <a-input @change="clearSpace" @pressEnter="clickSearch" :maxLength="20" v-decorator="['tel']" allow-clear placeholder="请输入联系号码"/>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button style="margin-bottom: 4px;" type="primary" @click="clickSearch" >查询</a-button>
            <a-button style="margin-bottom: 4px;margin-left: 10px;" @click="clickReset" >重置</a-button>
          </a-col>
        </a-row>
      </div>

    </a-card>

    <a-card :bordered="false">
      <super-table
        :scroll="{ x: 800 }"
        style="margin: 0px -15px"
        ref="customerList"
        ls_props_columns="customerList"
        :bordered="false"
        size="small"
        :columns="columns"
        :data="loadListData"
        :rowKey="(record, index) => index"
      >
        <!--序号-->
        <template slot="index" slot-scope="text, record, index">
          <span>{{ (queryParam.pageNum - 1) * pagination.pageSize + (index + 1) }}</span>
        </template>
        <!--客户卡号-->
        <template slot="cardNo" slot-scope="text, record">
          <a class="g-f-14"  @click="toDetails(text, record)">{{ text }}</a>
          <a-tooltip placement="top">
            <template slot="title"> 复制 </template>
            <a-icon type="copy" @click="ConCopy(text)" theme="twoTone" two-tone-color="#3399ff" style="margin-left: 10px;cursor: pointer;" />
          </a-tooltip>
        </template>
        <!--联系方式-->
        <template slot="contactContent" slot-scope="record">
          <div class="g-flex g-y-center" style="margin:0 auto;display:block;margin-top: 5px;" >
            <template v-if="record.contactContent">
              <img v-if="record.contactType === 'tel'" :src="require('@/assets/tel.png')" alt="" width="25" />
              <img v-else-if="record.contactType === 'phone'" :src="require('@/assets/phone.png')" alt="" width="25" />
              <img v-else-if="record.contactType === 'wechat'" :src="require('@/assets/wechat.png')" alt="" width="25" />
              <img v-else-if="record.contactType === 'qq'" :src="require('@/assets/qq.png')" alt="" width="25" />
              <img v-else :src="require('@/assets/orther.png')" alt="" width="25" />
            </template>
            <span style="margin-left: 5px">{{ record.contactContent }}</span>
          </div>
        </template>
      </super-table>
    </a-card>
  </div>
</template>

<script>
import { customerList,customerSearch } from '@/api/modular/main/customer/customerManage'
import { AllHisUser, CustomerLevel, CustomerState, getUserTel } from '@/api/customer/customer'
import { SuperTable } from '@/components'
import moment from 'moment'
export default {
  components: {
    SuperTable,
  },
  data() {
    return {
      obModal: {
        title: '预存款充值',
        visible: false,
      },
      tel_arr: [], //联系号码数组
      form: this.$form.createForm(this),
      selectedRowKeys: [],
      allHisUser: {}, //全员员工
      customerLevel: [], //客户等级
      customerState: [], //客户状态
      advanced: false, // 高级搜索 展开/关闭
      // tstyle: {'padding': '24px  30px 0 0px', 'margin-bottom': '10px'},
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      loadListData: (parameter) => {
        // console.log('parameter',parameter)
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return customerSearch(this.queryParam).then((res) => {
            return res
        })
      },
      columns: [
        { title: '序号', align:'center', scopedSlots: { customRender: 'index' }, width: 70, fixed: 'left' },
        { title: '客户卡号', align:'center', dataIndex: 'cardNo', scopedSlots: { customRender: 'cardNo' }, width: 130 },
        { title: '客户姓名', align:'center', dataIndex: 'customerName', width: 100 },
        { title: '联系号码', align:'center', scopedSlots: { customRender: 'contactContent' }, width: 150, },
        { title: '客户年龄', align:'center', dataIndex: 'age', customRender: (age) => (age ? age : '无'), width: 150 },
        { title: '性别', dataIndex: 'sex', align:'center', width: 90, customRender: (sex) => {return sex == '0' ? '男' : sex == '1' ? '女' : '-'}, },
        { title: '等级',align:'center', dataIndex: 'customerLevel', width: 100 },
        { title: '状态', align:'center', dataIndex: 'customerState', width: 100 },
        { title: '开发人', dataIndex: 'developer',align: ' center', width: 120, },
        { title: '现场所属', dataIndex: 'consultMan',align: 'center', width: 120, },
        { title: '登记日期',
          align:'center',
          dataIndex: 'registDate',
          customRender: (registDate) => {return registDate ? registDate : '-'},
          width: 150,fixed: 'right'
        },
        // { title: '操作', align:'center', dataIndex: 'tags', key: 'tags', scopedSlots: { customRender: 'tags' }, fixed: 'right', width: 100, },
      ],
      data: [],
      pagination: {
        current: 1, //当前页
        pageSize: 20, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1, //第几页
        pageSize: 20, //每页中显示数据的条数
      },
      loading: false, //加载状态
      tempConsultManFlag: false,
    }
  },
  computed:{
    bthPermission(){
      const admintype = this.$store.state.user.admintype
      if(admintype===1){
        return true
      }
      if(this.hasPerm('receive:receiveList')){
        return false
      }
      if(this.hasPerm('customer:netConsultation:list')){
        return false
      }
      return true
    }
  },
  activated(){
     this.$refs.customerList.refresh()
  },
  created() {
    //钩子方法
    AllHisUser().then((res) => {
      // console.log('全员员工接口',res)
      this.allHisUser = res
    })
    CustomerLevel().then((res) => {
      this.customerLevel = res
    })
    CustomerState().then((res) => {
      this.customerState = res
    })

    
  },
  methods: {
    clearSpace(e){
      // console.log("e",e.target.value)
       e.target.value=e.target.value.replace(/\s+/g,'')
    },
    doCopy(text){
      this.$copyText(text).then(message => {
        console.log('copy', message)
        this.$message.success(`卡号 ${text} 复制完毕`)
      }).catch(err => {
        console.log('copy.err', err)
        this.$message.error('复制失败')
      })
    },
    showRecharge(record) {
      this.obModal.visible = true
      // this.obModal = {...record}
      this.form.resetFields()
      this.obModal.title = '预存款充值'
      this.obModal.customerName = record.customerName
      this.obModal.cardNo = record.cardNo
      this.obModal.customerId = record.customerId
      if (record.contactContent) {
        // record.contactContent.forEach((item) => {
        //   record.phone = item.contactContent
        //   this.obModal.phone = record.phone
        // })
        this.obModal.phone = record.contactContent

      } else {
        this.obModal.phone = '-'
      }
    },
    queryTelNumber(record) {
      console.log(record)
      const id = record.customerId
      getUserTel(id).then((res) => {
        console.log('电话号码：', res)
        this.tel_arr = res.data
        this.$refs.CallSelect.show()
      })
    },
    checkPattern(str) {
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      if (pattern.test(str)) {
        return true
      }
      return false
    },
    //下拉框搜索查找
    select_search_consultMan(value) {
      this.form.setFieldsValue({
        consultMan: value,
      })
    },
    //下拉框搜索查找
    select_search_developer(value) {
      this.form.setFieldsValue({
        developer: value,
      })
    },
    //点击查询
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      const time = form_values.registDate
      const name = form_values.name

      if (time && time.length > 0) {
        form_values.registDateStart = moment(time[0]).format('YYYY-MM-DD')
        form_values.registDateEnd = moment(time[1]).format('YYYY-MM-DD')
      }
      /**下拉框搜索**/
      const tempConsultManFlag = this.checkPattern(form_values.consultMan)
      const tempdeveloperFlag = this.checkPattern(form_values.developer)

      let tempConsultManValue
      let tempdeveloperValue
      if (tempConsultManFlag) {
        const obj = this.allHisUser.userList.filter((item) => form_values.consultMan == item.name)[0]
        tempConsultManValue = form_values.consultMan
        form_values.consultMan = obj ? obj.id : tempConsultManValue
      }
      if (tempdeveloperFlag) {
        const obj = this.allHisUser.userList.filter((item) => form_values.developer == item.name)[0]
        tempdeveloperValue = form_values.developer
        form_values.developer = obj ? obj.id : tempdeveloperValue
      }

      /**表单转换为查询参数*/
      this.queryParam = form_values
      console.log("param",this.queryParam)

      this.queryParam.registDate = undefined
      this.queryParam.pageNum = 1
      this.$refs.customerList.refresh(true)

      setTimeout(() => {
        if (tempConsultManFlag) {
          this.form.setFieldsValue({
            consultMan: tempConsultManValue,
          })
        }
        if (tempdeveloperFlag) {
          this.form.setFieldsValue({
            developer: tempdeveloperValue,
          })
        }
      }, 500)
    },
    clickReset() {
      this.form.resetFields()
      this.queryParam={}
      this.queryParam.pageSize=10
      this.queryParam.pageNum=1
    },
    //获取客户列表
    getList() {
      // this.loading = true
      customerList(this.queryParam).then((res) => {
        // console.log('客户列表数据',res)
        this.data = res.rows
        this.pagination.total = parseInt(res.total)
        // this.loading = false
      })
    },

    //点击查看客户详情
    toDetails(text, tags, i = 0) {
      this.$router.push({
        path: 'customer_details',
        query: {
          id: tags.customerId,
          card_no: tags.cardNo,
          customerName:tags.customerName
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
//.table-operator {
//  margin-bottom: 18px;
//}
///deep/ .ant-calendar-date-panel {
//  display: flex;
//}
///deep/ .ant-calendar-input {
//  flex: 1;
//  width: 100%;
//}
///deep/ .ant-calendar-input[placeholder] {
//  text-align: center !important;
//}
//button {
//  margin-right: 8px;
//}
///deep/ .ant-col {
//  padding: 0 12px !important;
//}
//

 
</style>